<template>
    <div id="homework" aa="aa">
        <div id="content">
            <div class="u4088_home">
                <div class="u4088"></div>
                <div class="home_text">首页</div>
            </div>
            <span class="data_screen">数据总览</span>
            <!-- 预约人数栏 -->
            <div class="num_all">
                <div class="all_people_num">
                    <div class="num_tag">
                        <div class="people_img">
                            <img class="hospitalimg"
                                src="https://cdn3.axureshop.com/demo/1634752/images/%E9%A6%96%E9%A1%B5_1/u4100.svg"
                                alt="">
                        </div>
                        <div class="num_taday">
                            <img class="todayimg"
                                src="https://cdn3.axureshop.com/demo/1634752/images/%E9%A6%96%E9%A1%B5_1/u4099.svg"
                                alt="">
                            <span class="numpeople_today">{{ yyrsData.yypeople }}</span>
                            <span class="text_numpeople"
                                style="font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;font-weight:400;color:#AAAAAA;font-size:12px;">今日预约人数</span>
                        </div>
                    </div>
                    <div class="num_tag">
                        <div class="people_img registration">
                            <img class="hospitalimg"
                                src="https://cdn3.axureshop.com/demo/1634752/images/%E9%A6%96%E9%A1%B5_1/u4106.svg"
                                alt="">
                        </div>
                        <div class="num_taday">
                            <img class="todayimg"
                                src="https://cdn3.axureshop.com/demo/1634752/images/%E9%A6%96%E9%A1%B5_1/u4099.svg"
                                alt="">
                            <span class="numpeople_today">{{ yyrsData.ghrs }}</span>
                            <span class="text_numpeople"
                                style="font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;font-weight:400;color:#AAAAAA;font-size:12px;">今日挂号人数</span>
                        </div>
                    </div>
                    <div class="num_tag">
                        <div class="people_img  amount_all ">
                            <img class="hospitalimg"
                                src="https://cdn3.axureshop.com/demo/1634752/images/%E9%A6%96%E9%A1%B5_1/u4111.svg"
                                alt="">
                        </div>
                        <div class="num_taday">
                            <img class="todayimg"
                                src="https://cdn3.axureshop.com/demo/1634752/images/%E9%A6%96%E9%A1%B5_1/u4099.svg"
                                alt="">
                            <span class="numpeople_today">{{ yyrsData.czze }}</span>
                            <span class="text_numpeople"
                                style="font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;font-weight:400;color:#AAAAAA;font-size:12px;">今日门诊充值总额</span>
                        </div>
                    </div>
                    <div class="num_tag">
                        <div class="people_img pay_all">
                            <img class="hospitalimg"
                                src="https://cdn3.axureshop.com/demo/1634752/images/%E9%A6%96%E9%A1%B5_1/u4118.svg"
                                alt="">
                        </div>
                        <div class="num_taday">
                            <img class="todayimg"
                                src="https://cdn3.axureshop.com/demo/1634752/images/%E9%A6%96%E9%A1%B5_1/u4099.svg"
                                alt="">
                            <span class="numpeople_today">{{ yyrsData.xfze }}</span>
                            <span class="text_numpeople"
                                style="font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;font-weight:400;color:#AAAAAA;font-size:12px;">今日门诊消费总额</span>
                        </div>
                    </div>
                    <div class="num_tag last_tag">
                        <div class="people_img car_people">
                            <img class="hospitalimg"
                                src="https://cdn3.axureshop.com/demo/1634752/images/%E9%A6%96%E9%A1%B5_1/u4124.svg"
                                alt="">
                        </div>
                        <div class="num_taday">
                            <img class="todayimg"
                                src="https://cdn3.axureshop.com/demo/1634752/images/%E9%A6%96%E9%A1%B5_1/u4099.svg"
                                alt="">
                            <span class="numpeople_today">{{ yyrsData.bkrs }}</span>
                            <span class="text_numpeople"
                                style="font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;font-weight:400;color:#AAAAAA;font-size:12px;">今日绑卡人数</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 数据图表栏echarts -->
            <div id="picture">
                <div ref="order" class="order">


                </div>
                <div ref="pay_trend" class="pay_trend">

                </div>
            </div>
            <!-- 实时热门排行 -->
            <div id="hot">
                <div class="detail_people">
                    <span class="shishi">实时挂号</span>
                    <div>
                        <el-table :data="tableData" height="384" style="width: 100%" @row-click="handle">
                            <el-table-column prop="head" label="头像" width="46">
                                <template slot-scope="scope">
                                    <div class="img_pic" :style="scope.row.style"></div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="hurtname" label="患者姓名" width="70">
                            </el-table-column>
                            <el-table-column prop="tel" label="患者手机号码" width="110">
                            </el-table-column>
<<<<<<< HEAD
                            <el-table-column
                              prop="tel"
                              label="患者手机号码"
                              width="110">
                            </el-table-column>                           
                            <el-table-column
                              prop="ks"
                              label="挂号科室"
                               width="100">
=======
                            <el-table-column prop="ks" label="挂号科室" width="120">
>>>>>>> efea7fc1993aa1240c76862fb061bf17129543ef
                            </el-table-column>
                            <el-table-column prop="ghf" label="挂号费" width="60">
                            </el-table-column>
                            <el-table-column prop="caozuotime" label="挂号时间">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <!-- 热门科室与医生 -->
                <div class="de_doctor">
                    <div class="department">
                        <span class="shishi">热门科室</span>
                        <el-table height="384" :data="hotksData" style="width: 100%">
                            <el-table-column prop="url" label="排名" width="46">
                                 <template slot-scope="scope">
                                    <div class="img_pic" :style="scope.row.style"></div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="ks" label="科室" width="70">
                            </el-table-column>
                            <el-table-column prop="num" label="挂号量" width="110">
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="doctor">
                        <span class="shishi">热门医生</span>
                        <el-table height="384" :data="tableData2" style="width: 100%">
                            <el-table-column prop="style" label="排名" width="46">
                                <template slot-scope="scope">
                                    <div class="nth_div" :style="scope.row.style">
                                        <span>{{ scope.row.nth }}</span>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="name" label="医生姓名" width="70">
                            </el-table-column>
                            <el-table-column prop="num" label="挂号量" width="110">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
<<<<<<< HEAD
import {inhospital,echartsYu,consumeHospital} from '../../api/payMoney/index'
import { allNum ,hotks} from "../../api/home/index";
=======
import { inhospital, echartsYu, consumeHospital } from '../../api/payMoney/index'
import { allNum } from "../../api/home/index";
>>>>>>> efea7fc1993aa1240c76862fb061bf17129543ef
import * as echarts from 'echarts';
export default {
    data() {
        return {
            yyrsData: {},
            tableData: [],
            tableData1: [
                {
                    room: '王小虎',
                    num: 100,
                    style: {
                        borderRadius: '999px',
                        background: 'linear-gradient(270deg, rgba(202, 249, 130, 1) 0%, rgba(46, 212, 119, 1) 100%)',
                        width: '32px',
                        height: '32px',
                        color: 'rgba(255, 255, 255, 0.988235294117647)',
                    },
                    nth: 1
                }, {
                    room: '王小虎',
                    num: 100,
                    style: {
                        borderRadius: '999px',
                        background: 'linear-gradient(270deg, rgba(250, 205, 145, 1) 1%, rgba(255, 145, 56, 1) 100%)',
                        width: '32px',
                        height: '32px',
                        color: 'rgba(255, 255, 255, 0.988235294117647)',
                    },
                    nth: 2
                }, {
                    room: '王小虎',
                    num: 100,
                    style: {
                        borderRadius: '999px',
                        background: 'linear-gradient(270deg, rgba(250, 205, 145, 1) 1%, rgba(255, 145, 56, 1) 100%)',
                        width: '32px',
                        height: '32px',
                        color: 'rgba(255, 255, 255, 0.988235294117647)',
                    },
                    nth: 3
                }, {
                    room: '王小虎',
                    num: 100,
                    style: {
                        borderRadius: '999px',
                        background: 'linear-gradient(270deg, rgba(215, 215, 215, 1) 1%, rgba(170, 170, 170, 1) 100%)',
                        width: '32px',
                        height: '32px',
                        color: 'rgba(255, 255, 255, 0.988235294117647)',
                    },
                    nth: 4
                }, {
                    room: '王小虎',
                    num: 100,
                    style: {
                        borderRadius: '999px',
                        background: 'linear-gradient(270deg, rgba(215, 215, 215, 1) 1%, rgba(170, 170, 170, 1) 100%)',
                        width: '32px',
                        height: '32px',
                        color: 'rgba(255, 255, 255, 0.988235294117647)',
                    },
                    nth: 5
                }
            ],
            tableData2: [
                {
                    name: '王小虎',
                    num: 100,
                    style: {
                        borderRadius: '999px',
                        background: 'linear-gradient(270deg, rgba(202, 249, 130, 1) 0%, rgba(46, 212, 119, 1) 100%)',
                        width: '32px',
                        height: '32px',
                        color: 'rgba(255, 255, 255, 0.988235294117647)',
                    },
                    nth: 1
                }, {
                    name: '王小虎',
                    num: 100,
                    style: {
                        borderRadius: '999px',
                        background: 'linear-gradient(270deg, rgba(250, 205, 145, 1) 1%, rgba(255, 145, 56, 1) 100%)',
                        width: '32px',
                        height: '32px',
                        color: 'rgba(255, 255, 255, 0.988235294117647)',
                    },
                    nth: 2
                }, {
                    name: '王小虎',
                    num: 100,
                    style: {
                        borderRadius: '999px',
                        background: 'linear-gradient(270deg, rgba(250, 205, 145, 1) 1%, rgba(255, 145, 56, 1) 100%)',
                        width: '32px',
                        height: '32px',
                        color: 'rgba(255, 255, 255, 0.988235294117647)',
                    },
                    nth: 3
                }, {
                    name: '王小虎',
                    num: 100,
                    style: {
                        borderRadius: '999px',
                        background: 'linear-gradient(270deg, rgba(215, 215, 215, 1) 1%, rgba(170, 170, 170, 1) 100%)',
                        width: '32px',
                        height: '32px',
                        color: 'rgba(255, 255, 255, 0.988235294117647)',
                    },
                    nth: 4
                }, {
                    name: '王小虎',
                    num: 100,
                    style: {
                        borderRadius: '999px',
                        background: 'linear-gradient(270deg, rgba(215, 215, 215, 1) 1%, rgba(170, 170, 170, 1) 100%)',
                        width: '32px',
                        height: '32px',
                        color: 'rgba(255, 255, 255, 0.988235294117647)',
                    },
                    nth: 5
                }
            ]
        }
    },
    created() {

    },
<<<<<<< HEAD
    mounted() {  
        hotks()
        .then(res=>{
            console.log(res);
            this.hotksData=res.data
        })
        allNum()
        .then(res=>{
            // console.log(res);
            // console.log(res);
            this.yyrsData=res.data[0]
=======
    mounted() {
        allNum()
            .then(res => {
                this.yyrsData = res.data[0]
            })
        echartsYu().then(res => {
            this.yuData = res
>>>>>>> efea7fc1993aa1240c76862fb061bf17129543ef
        })
        inhospital().then(res => {
            this.data = res.data
        })
        let myChart = echarts.init(this.$refs.order)
        let myChart_pay_trend = echarts.init(this.$refs.pay_trend)
        let option = {
            grid: {
                y: 100,
            },
            title: {
                text: '近七日挂号预约情况',
                //1 文字样式 textStyle
                textStyle: {
                    color: '#000'
                },
                left: 20,
                top: 20
            },
            xAxis: {
                color: ['#2EB7BD', '#3CE1D9', '#FBBACB', '#4695D1'],
                type: 'category',
                data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                    data: [100, 200, 150, 80, 70, 110, 130],
                    type: 'bar',
                    barWidth: 10,
                    itemStyle: {
                        normal: {
                            barBorderRadius: [10, 10, 0, 0],
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 1, 0,
                                [
                                    { offset: 0, color: '#3977E6' },
                                    { offset: 1, color: '#37BBF8' }
                                ]
                            )
                        }
                    }
                }
            ]
        };
        let pay_trend_option = {
            title: {
                text: '近七日门诊充值趋势',
                //1 文字样式 textStyle
                textStyle: {
                    color: '#000'
                },
                //2 标题边框 
                // borderWidth: 5,  //边框宽度
                // borderColor: 'blue',  //边框颜色
                // borderRadius: 5, //边框圆角
                //3 标题位置(left,top,bottom,right)
                left: 20,
                top: 20
            },
            grid: {
                y: 100,
            },
            xAxis: {
                type: 'category',
                data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
            },
            yAxis: {
                type: 'value'
            },
            axisTick: {
                //    show: true
            },
            series: [
                {
                    symbolSize: 0,
                    label: {
                        normal: {
                            show: true,
                        }
                    },
                    symbol: '',
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line',
                    smooth: true,
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                color: '#FF9912', //改变折线颜色
                                width: 5,
                            },
                        }
                    },
                }]
        }
        myChart.setOption(option)
        myChart_pay_trend.setOption(pay_trend_option)
        consumeHospital()
            .then(res => {
                this.tableData = res.data
            })
    },
    methods: {
        handle(row, event, colume) {
            this.$router.push('/subscribe/detail')
        }
    },

}
</script>

<style  scoped>
#zr_0 {
    width: 100%;
}

.img_pic {
    background-color: rgba(0, 110, 255, 0.0980392156862745);
    width: 32px;
    height: 32px;
    color: rgba(255, 255, 255, 0.988235294117647);
    border-radius: 40px;
}

.num_tag {
    position: relative;
    display: flex;
    width: 18%;
    height: 101px;
    background-color: rgba(255, 255, 255, 1);
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    box-shadow: 0px 0px 20px rgb(215 215 215);
    background: inherit;
    margin-right: 1.6%;
}

.people_img {
    display: flex;
    justify-content: center;
    align-items: center;
    border-width: 0px;
    width: 72px;
    height: 72px;
    background: linear-gradient(270deg, rgba(98, 156, 244, 1) 0%, rgba(0, 110, 255, 1) 100%);
    border: none;
    border-radius: 4px;
    margin-right: 12px;
    margin-left: -24px;
}

.num_taday {
    display: flex;
    flex-direction: column;
    color: #333333;
}

.hospitalimg {
    width: 24px;
    height: 27px;
}

.todayimg {
    position: absolute;
    top: 24px;
    right: 16px;
    width: 14px;
    height: 13px;
}

.numpeople_today {
    font-size: 32px;
    font-weight: 650;
}

.all_people_num {
    display: flex;

}

.u4088 {
    background-color: rgba(0, 110, 255, 1);
    border-radius: 4px;
    width: 24px;
    height: 8px;
}

.home_text {
    width: 100px;
    font-size: 24px;
    margin-left: 20px;
}

.data_screen {
    font-size: 20px;
    letter-spacing: 1.1px;
    display: block;
    margin: 20px 0;
}

.u4088_home {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.text_numpeople {
    display: block;
    margin: 10px 0;
}

.registration {
    background: -webkit-linear-gradient(180deg, rgba(236, 128, 141, 1) 0%, rgba(244, 99, 99, 1) 100%);
}

.amount_all {
    background: linear-gradient(270deg, rgba(202, 249, 130, 1) 0%, rgba(46, 212, 119, 1) 100%);
}

.pay_all {
    background: linear-gradient(270deg, rgba(250, 205, 145, 1) 1%, rgba(255, 145, 56, 1) 100%);
}

.car_people {
    background: linear-gradient(270deg, rgba(194, 128, 255, 1) 0%, rgba(132, 0, 255, 1) 100%);
}

.last_tag {
    margin-right: 0;
}

#picture {
    width: 100%;
    display: flex;
    margin: 30px 0;
}

.order {
    width: 48%;
    height: 433px;
    background-color: rgba(255, 255, 255, 1);
    margin-right: 10px;
    box-shadow: 0px 0px 20px rgb(215 215 215);
    border-radius: 8px;
}

.pay_trend {
    width: 48%;
    height: 433px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 20px rgb(215 215 215);
    border-radius: 8px;
}

#hot {
    display: flex;
}

.detail_people {
    width: 48%;
    height: 433px;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    margin-right: 10px;
    box-shadow: 0px 0px 20px rgb(215 215 215);
    box-sizing: border-box;
    padding: 18px;
}

.department,
.doctor {
    padding: 18px;
    height: 396px;
}

.department,
.doctor {
    width: 50%;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    margin-right: 10px;
    box-shadow: 0px 0px 20px rgb(215 215 215);

}

.de_doctor {
    width: 48%;
    display: flex;
}

.shishi {
    font-weight: 650;
    font-size: 20px;
}

.nth_div {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
<style >
[aa="aa"] .el-table th.el-table__cell>.cell {
    color: #AAAAAA;
    font-size: 12px;
    text-align: center;
}

[aa="aa"] .el-table td.el-table__cell div {
    font-size: 13px;
    text-align: center;
}
</style>
